<template>
    <div>
        <div class="product-box" v-for="(product, index) in props.productList" :key="index">
            <img class="img" :src="product.img" alt="">
            <div class="detail">
                <p class="title">{{ product.title }}</p>
                <div class="bottom">
                    <p class="price">¥{{ product.price }}</p>

                    <IconFont name="cart" color="#d81e06" size="16px" @click="addCart(product)"></IconFont>
                </div>

            </div>

        </div>

    </div>
</template>
<script lang="ts" setup>
import { IconFont } from '@nutui/icons-vue-taro'

interface Iproduct {
    id: number,
    img: string,
    title: string,
    price: number
}

interface IproductInfo {
    productList: Iproduct[]
}
const props = defineProps<IproductInfo>()

const addCart = (product: Iproduct) => {
    console.log('加入购物车', product)
}
</script>
  
<style lang="less">
@primary-color: #d81e06;

.product-box {
    margin: 32px auto;
    display: flex;
    width: 686px;
    border-radius: 16px;
    background-color: #fff;
    overflow: hidden;

    .img {
        width: 240px;
        height: 240px;
        border-radius: 16px;
    }

    .detail {
        margin-left: 16px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .price {
            font-size: 40px;
            color: @primary-color;
        }

        .bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
}
</style>